<template>
  <view>
    <view class="top">
      <view class="top-userinfo">
        <image :src="userinfo.avatarUrl" class="avatar"></image>
        <view class="nickname">
          <text>{{username ? username : userinfo.nickName}}</text>
        </view>
      </view>
      <view class="userinfo-title" @click="gotoUserPage">
        <text>个人主页 ></text>
      </view>
    </view>
    <view class="setting">
      <uni-list class="setting-list">
        <uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon1" title="个人资料" to="../../subpkg/userinfo/userinfo" clickable="true" class="setting-item"/>
        <uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon4" title="消息通知" :showBadge="isDot" badgeText="new" :badgeStyle="badgeStyle" clickable="true" class="setting-item" @click="gotoNews"/>
        <uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon2" title="历史记录" to="../../subpkg/bin/bin" clickable="true" class="setting-item"/>
        <uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon3" title="退出登录" class="setting-item" clickable="true" @click="logout"/>
      </uni-list>
    </view>
  </view>
</template>

<script>
  import {mapMutations,mapState} from 'vuex'
  export default {
    name:"user-mine",
    data() {
      return {
        extraIcon1: {
        					color: '#2D3C45',
        					size: '22',
        					type: 'person'
        			},
        extraIcon2: {
        					color: '#2D3C45',
        					size: '22',
        					type: 'trash'
        			},
        extraIcon3: {
        					color: '#2D3C45',
        					size: '22',
        					type: 'redo'
        			},
        extraIcon4: {
        					color: '#2D3C45',
        					size: '22',
        					type: 'notification'
        			},
        mNum: '',
        isBegin: true,
        messageList: [],
        badgeStyle: {
          backgroundColor: '#F00A29',
          color: '#fff'
        }
      };
    },
    computed: {
      ...mapState('user_module',['userinfo','messageNum','username','userphone','useremail']),
      ...mapState('postitem_module',['isDot'])
    },
    methods: {
      ...mapMutations('user_module',['updateToken','updateUserInfo','updateUserPhone','updateUserEmail','updateUserName','updateisLogin','updateMessageNum','updateUserSex','updateUserId']),
      ...mapMutations('postitem_module',['updatePostItem','updateIsDot']),
      // 跳转到news页面
      gotoNews() {
        this.updateIsDot(false)
        uni.navigateTo({
          url: '../../subpkg/news/news'
        })
      },
      gotoUserinfo() {
        uni.navigateTo({
          url: '../../subpkg/userinfo/userinfo'
        })
      },
      //退出登录
      async logout() {
        let that = this
        uni.showModal({
          title: '提示',
          content: '确定退出登录吗?',
          success(res) {
            if (res.confirm) {
            			// console.log('用户点击确定');
                  that.updateUserInfo({})
                  that.updateToken('')
                  that.updateUserName('')
                  that.updateUserPhone('')
                  that.updateUserEmail('')
                  that.updatePostItem('')
                  that.updateisLogin(false)
                  // uni.clearStorageSync()
            		} else if (res.cancel) {
            			// console.log('用户点击取消');
                  
            		}
          },
          fail: (res) => res
        })
      },
      gotoUserPage() {
        //判断是否信息完善
          if(this.username === '' || this.userphone === '' || this.useremail === '') {
          uni.showModal({
            title: '提示',
            content: '您的信息尚未完善，请先完善个人信息',
            showCancel: false,
            confirmText: '去完善',
            success(res) {
              if (res.confirm) {
                    uni.navigateTo({
                      url: '../../subpkg/userinfo/userinfo'
                    })
              } 
            },
          })
        } else {
            const uid = uni.getStorageSync('userId')
            const avatar = this.userinfo.avatarUrl
            uni.navigateTo({
              url: '../../subpkg/userpage/userpage?id=' + uid + '&avatar=' + avatar
            })
        }
      },
      gotoModi() {
        uni.navigateTo({
          url: '/subpkg/userinfo/userinfo',
          success: (res) => {
          },
          fail: (res) => {
          }
        })
      },
      gotoBin() {
        uni.navigateTo({
          url: '/subpkg/bin/bin'
        })
      },
      updatemNum() {
      
      }
    },
    created() {
      this.updatemNum()
    },
    mounted() {
        
    }
  }
</script>

<style lang="scss">
  .top {
    height: 180px;
    // background-color: #5EC9FD;
    // FCE86A F7F0C1
    background-image: linear-gradient(to bottom , #FCE86A, #F7F0C1);
    // border-radius: 0 0 40% 40%;
    display: flex;
    align-items: center;  
    justify-content: space-between;
    &::after {
      content: " ";
      display: block;
      position: absolute;
      left: 0;
      top: 180px;
      width: 100%;
      height: 100px;
      background-color: #F7F0C1;
      // background-image: linear-gradient(to top , #FCE86A, #F7F0C1);
      border-radius: 0 0 100% 100%;
      // transform: translateY(50%);
    }
    .top-userinfo {
      display: flex;
      align-items: center;
      margin-left: 20px;
      .avatar {
        display: block;
        height: 180rpx;
        width: 180rpx;
        border-radius: 90rpx;
        margin-right: 8px;
      }
      .nickname {
        font-size: 18px;
        font-weight: 700;
      }
    }
    .userinfo-title {
      margin: 0 20px;
      text {
        font-size: 13px;
        color: rgba(0,0,0,0.8);
      }
    }
  }
  
  .setting {
    padding: 30px 15px;
    .setting-list {
      border-radius: 20px;
      .setting-item {
        border-bottom: 1px solid #ECF5FF;
      }
    }
  }
</style>
